<template>
  <div class="page">
    <back-btn></back-btn>
    <div>
      <div class="head">
        <div class="tab_bubble">
          <span class="bubble"></span>
          <div class="title">专业列表</div>
        </div>
        <search @search="search"></search>
      </div>
      <div class="tab-bar">
        <tab-bar :tabsData="list" :currentIndex="curIndex" @tabClick="tabSwitch"></tab-bar>
      </div>
    </div>
    <div class="content scroll-wrap">
      <major-list :categoryList="categoryList" :majorData="majorData" :text="text" ref="majorList"></major-list>
    </div>
  </div>
</template>

<script>
import { api } from '@/utils'
import majorList from '~/components/majorList'
export default {
  layout: 'zhiyuan',
  data () {
    return {
      list: ['本科', '专科'],
      curIndex: 0,
      categoryList: [],
      majorData: [],
      text: '正在加载数据...'
    }
  },
  methods: {
    tabSwitch (i) {
      this.curIndex = i
      this.$refs.majorList.currentIndex = 0
      this.getData(this.curIndex)
    },
    getData (params) {
      this.$axios.get(api.zhiyuanQueryMajorByGrade, { params: { gradeId: params } }).then(data => {
        if (data.length > 0) {
          this.majorData = data
          this.categoryList = []
          this.lodash.map(data, (item) => {
            this.categoryList.push({
              id: item.id,
              name: item.name
            })
          })
          this.text = ''
        } else {
          this.majorData = []
          this.categoryList = []
          this.text = '暂无数据'
        }
      })
    },
    search (e) {
      if (e.trim() !== '') {
        this.$store.commit('SET_SEARCH_VAL', e)
        this.$router.push(`search?fromWhere=${1}`)
      }
    }
  },
  components: {
    majorList
  },
  beforeMount () {
    this.getData(this.curIndex)
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .head {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .search {
      padding: 0;
      margin: 0;
      line-height: 30px;
      text-align: right;
      width: 50%;
      display: flex;
      justify-content: flex-end;
      >div{
        margin: 0;
      }
      input[type="text"] {
        padding-left: 30px;
        width: 90%;
      }
    }
  }
  .content {
    padding: 0;
    // flex: 1;
    // overflow-y: auto;
  }
  /deep/ .tab-bar {
    .tab {
      margin-left: 0;
    }
  }
  /deep/ .major>li>a:hover{
    color: $positive;
  }
}
</style>
